<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router'
import { showToast } from 'vant';

import { useUserStore } from '@/stores/user';
import { uploadTaskEventToGA, getAssetsFiles } from '@/utils'
import { uploadTaskEventToAdmin } from '@/api/task'

const userStore = useUserStore()
const route = useRoute()

const eggPath = computed(() => {
    const hasBrokenEggCount = (userStore.info).turntableTotalNums > (userStore.info).turntableNums
    return hasBrokenEggCount ? '/egg' : route.fullPath
})

const giftPath = computed(() => {
    const hasLotteryCount = (userStore.info).lotteryTotalNums > (userStore.info).lotteryNums
    return hasLotteryCount ? '/turntable' : route.fullPath
})

const notLotterCount = (type: string): void => {
    type Event = { adminId: number, name: string }
    const event: Record<string, Event> = {
        egg: { adminId: 4, name: '扭蛋' },
        gift: { adminId: 5, name: '转盘' },
        news: { adminId: 34, name: '咨询中心' },
        games: { adminId: 35, name: '游戏中心' }
    }

    uploadTaskEventToGA(event[type].name)
    uploadTaskEventToAdmin({
        device: userStore.device,
        moduleType: 3,
        eventType: event[type].adminId
    })

    const hasBrokenEggCount = userStore.info.turntableTotalNums > userStore.info.turntableNums
    const hasLotteryCount = userStore.info.lotteryTotalNums > userStore.info.lotteryNums
    if (!hasLotteryCount || !hasBrokenEggCount) {
        showToast('We have run out of times for today')
    }
}

const moduleOptions = [
    {
        type: 'news',
        title: 'Earn 1000+ Wheats',
        desc: 'Complete missions to earn Wheats',
        icon: 'news-coin.png',
        fontSizeColor: '#BC7006',
        path: '/news',
        backgroud: 'linear-gradient(to bottom, #EC9999, #C73636)'
    },
    {
        type: 'games',
        title: 'Play Games',
        desc: 'Play Games for Wheats!',
        icon: 'game_boy.png',
        fontSizeColor: '#7738C7',
        path: '/gameCenter',
        backgroud: 'linear-gradient(to bottom, #BDBDF4, #5B5BDE)'
    },
    {
        type: 'gift',
        title: "God's Gift",
        desc: 'Easily get Wheats every day',
        icon: 'game-lottery.png',
        fontSizeColor: '#11969A',
        path: giftPath.value,
        backgroud: 'linear-gradient(to bottom, #99ECAA, #36C2C7)'
    },
    {
        type: 'egg',
        title: "Easter Egg",
        desc: 'Earn Wheats by complete tasks',
        icon: 'game_egg.png',
        fontSizeColor: '#C54136',
        path: eggPath.value,
        backgroud: 'linear-gradient(to bottom, #F4BDE0, #DE5B9B)'
    }
]

const moduleStyle = (module: any) => {
    return { '--color': module.fontSizeColor, '--bg': module.backgroud }
}
</script>

<template>
    <div class="lottery">
        <template v-for="item in moduleOptions">
            <router-link class="lottery-normal" :to="item.path" @click="notLotterCount(item.type)" :style="moduleStyle(item)">
                <h1 class="lottery-title">{{ item.title }}</h1>
                <p class="lottery-desc">{{ item.desc }}</p>
                <div class="lottery-btn">Start Earning</div>
                <img class="lottery-icon" :src="getAssetsFiles(item.icon)" :alt="item.type" width="50">
            </router-link>
        </template>
    </div>
</template>

<style scoped lang="scss">
.lottery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 3vmin;
    grid-gap: 3vmin;

    &-normal {
        position: relative;
        border-radius: 3vmin;
        padding: 3vmin;
        overflow: hidden;
        background: var(--bg);
    }

    &-title {
        font-size: var(--mini-font-size);
        font-weight: 900;
        color: #fff;
    }

    &-desc {
        display: block;
        width: 37vmin;
        height: 8vmin;
        font-size: 12px;
        transform: scale(.8);
        transform-origin: left;
        color: #FBFFBF;
        margin-top: .5vmin;
        margin-bottom: .5vmin;
    }

    &-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25vmin;
        height: 5.5vmin;
        color: var(--color);
        background-color: #ffffff;
        border-radius: 999px;
        font-weight: bold;
        font-size: 3.1vmin;
    }

    &-icon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 16vmin;
        &[alt="news"] {
            width: 23vmin;
        }
    }

    &_span {
        display: block;
        width: 18.5vmin;
        font-size: 5vmin;
        font-weight: bold;
        font-family: none;
        color: #ffffff;
    }
}
</style>